<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>班级列表</title>
</head>
<link href="${pageContext.request.contextPath}/static/core/css/style.css">
<style>
    .modal.fade.in {
        top: 90px;
    }
</style>
<body>

<script>
    $(function () {
        /*调用初始模态框的方法*/
        modelDisiplay()
    })
    <!--删除方法-->
    function remove(id) {
        var flag = confirm("您确认要执行删除操作？");
        if (flag) window.location.href = _baselocation + "/classes/delete/" + id;
    }
    /*
    * 模态框中年级列表初始化
    * */
    function modelDisiplay() {
        $.ajax({
            url:_baselocation+"/enrol/enrol/list",
            type: 'post',
            contentType: 'application/json; charset=UTF-8',
            data: null,//一定不能给转成json字符串传过去 结果会是这样""201922101411""
            dataType:"json",
            success: function (result) {
                console.log(result)
                if (result!=null){
                    for (var i=0;i<result.length;i++){
                        $(".class-enrol-id").append('<option value='+result[i].id+'>'+result[i].enrolName+'</option>');
                    }
                }
            },
        });
    }
    /**
     * 将修改的班级信息传递到后台并且隐藏模态框
     */
    function update() {
        /*获取form表达之后调用sumbit方法传递数据*/
        $("#update-enrol-form").submit();
        $("[name='className']").val("");
        $("[name='classCode']").val("")

        /*隐藏模态框*/
        $('#update-class-modal').modal('hide');
    }

    function onUpdateModal(id) {
        /*获取对应id的班级元素就是一行tr*/
        var _Dom = $('[data-class-code='+id+']');
        /*获取班级名称*/
        var className = _Dom.find(".class-name").text();
        /*获取班级人数*/
        var classCode = _Dom.find(".class-code").text();
        /*获取班级所属年级id*/
        var enrolid = _Dom.find(".class-enrol-name").attr("data-enrol-id");
        /*在控制台中输出 作用：调试软件*/
        console.log(className+""+classCode+""+enrolid);
        /*设置表单信息*/
        $(".class-id").val(id);
        $("[name='className']").val(className.trim());
        $("[name='classCode']").val(classCode.trim())
        $("[name='enrolContent']").val(enrolid.trim())
        /*显示修改模态框*/
        $('#update-class-modal').modal('show');
    }
    function addClasses(){
        window.location.href = _baselocation + "/classes/add";
    }
</script>
<!--主容器-->
<div class="row">

    <div class="col-md-12">
        <h1>班级管理</h1>
        <button type="button" class="add-enrol-btn btn btn-warning" onclick="addClasses()">添加</button>
        <table class="table table-hover table-bordered">
            <!--表头-->
            <thead>
            <th class="info text-center">班级ID</th>
            <th class="info text-center">班级编号</th>
            <th class="info text-center">班级名称</th>
            <th class="info text-center">所属年级</th>
            <th class="info text-center">操作</th>
            </thead>
            <!--表内容-->
            <tbody>
            <c:forEach var="obj" items="${voList}" varStatus="index">
                <tr class="text-center" data-class-code="${obj.id}">
                    <td>
                            ${index.count}
                    </td>
                    <td class="class-code">
                            ${obj.classCode}
                    </td>
                    <td class="class-name">
                            ${obj.className}
                    </td>
                    <td class="class-enrol-name" data-enrol-id="${obj.enrolEntity.id}">
                            ${obj.enrolEntity.enrolName}
                    </td>
                    <td>
                        <button class="btn btn btn-info" onclick="onUpdateModal(${obj.id})">修改</button>
                        <button class="btn btn btn-danger" onclick="remove(${obj.id})">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!--修改模态框-->
<div class="modal fade" id="update-class-modal" tabindex="10" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改班级信息</h4>
            </div>
            <div class="modal-body">
                <!--修改区-->
                <form action="${pageContext.request.contextPath}/classes/update" id="update-enrol-form" class="cmxform"
                      method="post">
                    <input type="hidden" name="id" class="class-id">
                    <div class="form-group">
                        班级编号：<input class="form-control input-lg" name="classCode" type="text" placeholder="请输入班级人数"
                                    style="font-size: 16px">
                    </div>
                    <div class="form-group">
                        班级名称：<input class="form-control input-lg " name="className" type="text" placeholder="请输入班级名称"
                                    style="font-size: 16px">
                        <sapn class="register-prompt" style="color: red;"></sapn>
                    </div>
                    <div class="form-group">
                        班级所属年级：
                        <select class="form-control class-enrol-id" name="enrolId">
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>
